<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>尚硅谷会员注册页面</title>
    <link type="text/css" rel="stylesheet" href="../../static/css/style.css" />
    <link rel="stylesheet" href="../../static/css/register.css" />
    <style type="text/css">
      .login_form {
        height: 420px;
        margin-top: 25px;
      }
    </style>
  </head>
  <body>
  <div id="app">
    <div id="login_header">
      <a href="../../index.html">
        <img class="logo_img" alt="" src="../../static/img/logo.gif" />
      </a>
    </div>

    <div class="login_banner">
      <div class="register_form">
        <h1>注册尚硅谷会员</h1>
        <form action="regist_success.html" @submit="checkRegist()">
          <div class="form-item">
            <div>
              <label>用户名称:</label>
              <input type="text" placeholder="请输入用户名" @change="checkUsername()" v-model="username"/>
            </div>
            <span class="errMess" v-text="usernameErrorMsg">用户名应为6~16位数组和字母组成</span>
          </div>
          <div class="form-item">
            <div>
              <label>用户密码:</label>
              <input type="password" placeholder="请输入密码" @change="checkPassword()" v-model="password" />
            </div>
            <span class="errMess" v-text="passwordErrorMsg">密码的长度至少为8位</span>
          </div>
          <div class="form-item">
            <div>
              <label>确认密码:</label>
              <input type="password" placeholder="请输入确认密码" @change="checkRePassword()" v-model="repassword"/>
            </div>
            <span class="errMess" v-text="repasswordErrorMsg">密码两次输入不一致</span>
          </div>
          <div class="form-item">
            <div>
              <label>用户邮箱:</label>
              <input type="text" placeholder="请输入邮箱" @change="checkEmail()" v-model="email" />
            </div>
            <span class="errMess" v-text="emailErrorMsg">请输入正确的邮箱格式</span>
          </div>
          <div class="form-item">
            <div>
              <label>验证码:</label>
              <div class="verify">
                <input type="text" placeholder="" @change="checkCode()" v-model="code"/>
                <img src="../../static/img/code.bmp" alt="" />
              </div>
            </div>
            <span class="errMess" v-text="codeErrorMsg">请输入正确的验证码</span>
          </div>
          <button class="btn" type="submit">注册</button>
        </form>
      </div>
    </div>
    <div id="bottom">
      <span>
        尚硅谷书城.Copyright &copy;2015
      </span>
    </div>
  </div>

  </body>
<script src="/bookstome-v1/static/script/vue.js"></script>
<script>
  var vue=new Vue({
    el:"#app",
    data:{
      username:"",
      password:"",
      repassword:"",
      email:"",
      code:"",
      usernameErrorMsg:"用户名应为6~16位数组和字母组成",
      passwordErrorMsg:"密码的长度至少为5位",
      repasswordErrorMsg:"两次输入的密码不一致",
      emailErrorMsg:"请输入正确的邮箱格式",
      codeErrorMsg:"请输入正确的验证码"

    },
    methods:{
      checkUsername() {
       console.log("checkUsername"+this.username)
        var reg = /^[a-zA-Z0-9]{6,16}$/;
       if (reg.test(this.username)){
         this.usernameErrorMsg="";
         return true;
       }else {
         this.usernameErrorMsg="用户名应为6~16位数组和字母组成";
         return false;
       }
      },
      checkPassword() {
        console.log("checkPassword"+this.password)
        var reg = /^.{5,}$/;
        if (reg.test(this.password)){
          this.passwordErrorMsg="";
          return true;
        }else {
          this.passwordErrorMsg="密码的长度至少为5位";
          return false;
        }

      },
      checkRePassword(){
        console.log("checkRePassword"+this.repassword)
        if (this.password==this.repassword){
          this.repasswordErrorMsg="";
          return true;
        }else {
          this.repasswordErrorMsg="两次输入的密码不一致";
          return false;
        }
      },
      checkEmail(){
        console.log("checkEmail"+this.email)
        var reg = /^[a-zA-Z0-9_\.-]+@([a-zA-Z0-9-]+[\.]{1})+[a-zA-Z]+$/;
        if (reg.test(this.email)){
          this.emailErrorMsg="";
          return true;
        }else {
          this.emailErrorMsg="请输入正确的邮箱格式";
          return false;
        }
      },
      checkCode(){
        console.log("checkCode"+this.code)
        var reg = /^[a-z0-9]{5}$/;
        if (reg.test(this.code)){
          this.codeErrorMsg="";
          return true;
        }else {
          this.codeErrorMsg="请输入正确的验证码";
          return false;
        }
      },
      checkRegist(){
        if (!this.checkUsername()||!this.checkPassword()||!this.checkRePassword()||!this.checkEmail()||!this.checkCode()){
           event.preventDefault()
          return;
        }
      }


    }
  });
</script>
</html>
